<template>
	<el-dialog
		title="订单加急信息录入"
		v-model="dialogVisible"
		:destroy-on-close="true"
		width="500px"
		class="urgent-dialog"
	>
		<el-form
			ref="formRef"
			:model="formData"
			:rules="rules"
			label-width="110px"
			class="urgent-form"
		>
			<el-form-item label="客户加急原因" prop="reason" required>
				<el-input
					v-model="formData.reason"
					type="textarea"
					:rows="4"
					placeholder="请输入客户加急原因"
				/>
			</el-form-item>
			<el-form-item label="期望到达时间" prop="expectTime" required>
				<el-date-picker
					v-model="formData.expectTime"
					type="date"
					placeholder="选择日期"
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item label="加急费用" prop="urgentFee">
				<el-input-number
					v-model="formData.urgentFee"
					:min="0"
					:precision="2"
					style="width: 100%"
					placeholder="请输入加急费用"
				>
					<template #append>元</template>
				</el-input-number>
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button @click="handleCancel">取消</el-button>
			<el-button type="primary" @click="handleConfirm" :loading="submitting">
				保存
			</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	orderData: {
		type: Object,
		default: () => ({}),
	},
});

const emit = defineEmits(['update:modelValue', 'success']);

const dialogVisible = ref(false);
const submitting = ref(false);
const formRef = ref();

// 表单数据
const formData = reactive({
	reason: '',
	expectTime: '',
	urgentFee: null,
});

// 表单校验规则
const rules = {
	reason: [{ required: true, message: '请输入客户加急原因', trigger: 'blur' }],
	expectTime: [
		{ required: true, message: '请选择期望到达时间', trigger: 'change' },
	],
};

// 监听弹窗显示状态
watch(
	() => props.modelValue,
	(val) => {
		dialogVisible.value = val;
		if (val) {
			// 初始化表单数据
			resetForm();
		}
	},
);

// 监听弹窗关闭
watch(dialogVisible, (val) => {
	emit('update:modelValue', val);
});

// 重置表单
const resetForm = () => {
	formData.reason = '';
	formData.expectTime = '';
	formData.urgentFee = null;
};

// 取消
const handleCancel = () => {
	dialogVisible.value = false;
};

// 确认提交
const handleConfirm = async () => {
	if (!formRef.value) return;

	await formRef.value.validate(async (valid, fields) => {
		if (valid) {
			submitting.value = true;
			try {
				// TODO: 调用加急接口
				console.log('订单加急信息：', {
					orderNo: props.orderData.orderNo,
					...formData,
				});
				ElMessage.success('加急信息已保存');
				dialogVisible.value = false;
				emit('success', { ...formData });
			} finally {
				submitting.value = false;
			}
		} else {
			console.log('校验失败', fields);
		}
	});
};
</script>

<style lang="scss" scoped>
.urgent-dialog {
	:deep(.el-dialog__body) {
		padding: 20px 24px;
	}

	.urgent-form {
		margin-top: 10px;
	}

	:deep(.el-input-number) {
		width: 100%;
	}
}
</style>
